﻿@page "/card/card-with-list"
@inherits SampleBaseComponent;

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Lists

<SampleDescription>
    <p>This sample demonstrates rendering of List in Card component.</p>
</SampleDescription>
<ActionDescription>
    <p>Card is a small container in which user can show defined content in specific structure and it is flexible and extensible. In this sample we can render the list component in card component as template</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-lg-6">
            <SfCard>
                <CardContent>
                    <SfListView Id="List" DataSource="@ListData" CssClass="e-list-template" SortOrder="Syncfusion.Blazor.Lists.SortOrder.Ascending">
                        <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
                        <ListViewTemplates TValue="DataModel">
                            <Template>
                                <div class="e-list-wrapper e-list-multi-line e-list-avatar">
                                    @if (((context as DataModel).Avatar) != "")
                                    {
                                        <span class="e-avatar e-avatar-circle">@((context as DataModel).Avatar)</span>
                                    }
                                    else
                                    {
                                        <span class="@((context as DataModel).Pic) e-avatar e-avatar-circle"> </span>
                                    }
                                    <span class="e-list-item-header">@((context as DataModel).Text)</span>
                                    <span class="e-list-content">@((context as DataModel).Contact)</span>
                                </div>
                            </Template>
                        </ListViewTemplates>
                    </SfListView>
                </CardContent>
            </SfCard>
        </div>
    </div>
</div>

@code{

    List<DataModel> ListData = new List<DataModel>();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        ListData.Add(new DataModel { Text = "Fua Lamba ", Contact = "Online", Id = "5", Avatar = "", Pic = "pic01" });
        ListData.Add(new DataModel { Text = "Harrisburg Keith", Contact = "Offline", Id = "1", Avatar = "", Pic = "pic02" });
        ListData.Add(new DataModel { Text = "Izumi Katsuyoshi", Contact = "Online", Id = "2", Avatar = "", Pic = "pic03" });
        ListData.Add(new DataModel { Text = "Nawf El Azam", Contact = "Offline", Id = "9", Avatar = "", Pic = "pic04" });
        ListData.Add(new DataModel { Text = "Sofietje Boksem", Contact = "Online", Id = "7", Avatar = "", Pic = "pic05" });
    }

    public class DataModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
        public string Contact { get; set; }
        public string Avatar { get; set; }
        public string Pic { get; set; }
    }
}

<style>
    .e-listview.e-control {
        width: 400px;
    }

    .pic01 {
        background-image: url("images/cards/profile-one.png");
    }

    .pic02 {
        background-image: url("images/cards/profile-two.png");
    }

    .pic03 {
        background-image: url("images/cards/profile-four.png");
    }

    .pic04 {
        background-image: url("images/cards/profile-six.png");
    }

    .pic05 {
        background-image: url("images/cards/profile-seven.png");
    }

    #List .e-list-item:nth-child(1) .e-avatar {
        background-color: #039be5;
    }

    #List .e-list-item:nth-child(2) .e-avatar {
        background-color: #e91e63;
    }

    #List .e-list-item:nth-child(4) .e-avatar {
        background-color: #e91e63;
    }

    #List .e-list-item:nth-child(3) .e-avatar {
        background-color: #039be5;
    }

    #List .e-list-item:nth-child(6) .e-avatar {
        background-color: #009688;
    }

    #List .e-list-item:nth-child(8) .e-avatar {
        background-color: #000088;
    }

    .e-list-item-header {
        font-family: HelveticaNeue-Bold, 'Segoe UI' !important;
        font-size: 14px !important;
        color: #000000 !important;
    }

    #List .e-list-content:nth-child(odd) {
        font-family: Helvetica, 'Segoe UI' !important;
        font-size: 12px !important;
        color: #39D321 !important;
    }

    #List .e-list-content:nth-child(4) {
        font-family: Helvetica, 'Segoe UI' !important;
        font-size: 12px !important;
        color: #000 !important;
    }

    #List .e-list-content:nth-child(2) {
        font-family: Helvetica, 'Segoe UI' !important;
        font-size: 12px !important;
        color: #000 !important;
    }

    .e-card .e-card-content {
        padding: 0px;
    }

    .e-listview.e-control {
        width: inherit;
    }

    .row {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

